<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数组方法总结</title>
</head>

<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <script>
    // 创建数组
    var arr = ["1", "2", "3"];
    var arr = new Array("1", "2", "3");
    var arr = new Array(10).fill(1); //填充
    var arr = Array.of(3, 3, 3); // [3,3,3]

    /*
        迭代方法

        每一个都接收俩个参数
        
        循环执行的回调和回调的作用域 （可选，this的指向）

        回调接收三个参数 每一项,索引,和数组本身
    */
    var arr = [1, 2, 3, 4, 5];

    // 1.every 返回一个布尔值 全真则为真一假即假
    var result = arr.every((val, index, arr) => {
      return val > 0; //result true
      return val > 1; //result false
    }, this);

    // 2.some 返回一个布尔值 一真即为真
    var result = arr.some((val, index, arr) => {
      return val > 4; //result true
      return val > 0; //result true
      return val > 5; //result false
    }, this);

    //3.filter 返回一个符合条件的数组
    var result = arr.filter((val, index, arr) => {
      return val > 1; //result [2,3,4,5]
      return val > 5; //result []
    }, this);

    //4.map 对数组中的每一项运行给定函数 返回一个每一项调用后组成的新的数组
    var result = arr.map((val, index, arr) => {
      return val + 1; //result [2,3,4,5,6]
    }, this);

    //5.forEach 对数组中的每一项运行给定函数  没有返回值
    var result = [];
    arr.forEach((val, index, arr) => {
      result.push(val + 1); //result [2,3,4,5,6]
    }, this);

    //6.find 查找第一个符合条件的成员，没有找到返回undefined
    var result = arr.find((item, val, arr) => {
      return item > 2 // result 3
      return item > 5 // result undefined
    }, this);

    //7.findIndex 查找第一个符合条件的成员的索引，没有找到返回-1
    var result = arr.findIndex((item, val, arr) => {
      return item > 2 // result 2
      return item > 5 // result -1
    }, this);

    /*
        归并方法
        接收2个参数
        第一个为回调函数 
        （若不存在默认初始值该函数执行的次数为数组长度减1 第一次执行为 第一项（prev）和第二项（next））
        （若存在默认初始值该函数执行的次数为数组长度 第一次执行为 默认初始值（prev）和第一项（next））
        
        回调函数接收 4个参数

        prev,  上一次循环执行回调函数后的返回值 (第一次循环默认为设置的初始值)
        next,  下一项
        index  当前项索引
        arr    数组本身

        第二个参数为prev的初始值 （不传则为数组的第一项）
    */
    var arr = [1, 2, 3, 4, 5];

    // 1.reduce 从数组的第一项开始遍历到最后一项 返回最后一次循环结束 回调函数return的返回值
    var result = arr.reduce((prev, next, index, arr) => { //有默认初始值 执行5次
      // 数组的各项累加
      //第一次为 默认初始值 + arr[0]
      return prev + next; //result 15
    }, 0);
    var result = arr.reduce((prev, next, index, arr) => { //无默认初始值 执行4次
      // 数组的各项累加
      //第一次为 arr[0] + arr[1]
      return prev + next; //result 15
    });

    //2.reduceRight  与reduce作用相同 只是从最后一项开始反向遍历
    var result = arr.reduceRight((prev, next, index, arr) => {
      // 数组的各项累加
      //第一次为 arr[4] + arr[3]
      return prev + next; //result 15
    }, 0);


    /*
        数组的变异方法 (直接改变当前数组)
    */
    // 1.push 在数组的末尾添加一个或多个元素 返回数组的长度
    var arr = [1, 2, 3, 4, 5];
    var result = arr.push(6, 7, 8); // result 8  arr [1,2,3,4,5,6,7,8];

    // 2.pop 删除数组末尾的一个元素 返回呗删除的值
    var arr = [1, 2, 3, 4, 5];
    var result = arr.pop(); // result 5  arr [1,2,3,4];

    // 3.unshift 在数组的开头添加一个或多个元素 返回数组的长度
    var arr = [1, 2, 3, 4, 5];
    var result = arr.unshift(6, 7, 8); // result 8  arr [6,7,8,1,2,3,4,5];

    // 4.shift 删除数组头部的一个元素 返回呗删除的值
    var arr = [1, 2, 3, 4, 5];
    var result = arr.shift(); // result 1  arr [2,3,4,5];

    //5.sort 数组的排序 接收一个回调函数（可不传）
    //不传则按照字母的 ASCLL排序
    var arr = [1, 2, 3, 4, 5, 11];
    arr.sort(); //arr [1,11,2,3,4,5]
    //传则按照回调排序
    var arr = [1, 2, 3, 4, 5, 11];
    arr.sort((a, b) => {
      return a - b; //升序  //arr [1,2,3,4,5,11]
      return b - a; //降序  //arr [11,5,4,3,2,1]
    });
    //用于数组的随机打乱
    var arr = [1, 2, 3, 4, 5];
    arr.sort((a, b) => {
      return Math.random() - 0.5;
    });

    //6.reverse 数组的倒序操作
    var arr = [1, 2, 3, 4, 5];
    arr.reverse(); // arr [5,4,3,2,1]

    //7.splice 数组的增删改 返回新的数组且改变原数组
    //传一个参时 从传入的索引位置（包含传入索引的这一项）开始，一直删除到最后
    var arr = [2, 3, 4, 5, 6];
    var result = arr.splice(2); //arr [2,3] result [4,5,6]
    //传两个参时 从传入的索引位置（包含传入索引的这一项）开始，一直往后到第二个参数的项数
    var arr = [2, 3, 4, 5, 6];
    //从索引为2这项开始删除 往后删除2项
    var result = arr.splice(2, 2); //arr [2,3,6] result [4,5]
    //传三个参时 从传入的索引位置（包含传入索引的这一项）开始，一直往后到第二个参数的项数 且将开始项的位置填充为第三个参数
    var arr = [2, 3, 4, 5, 6];
    //从索引为2这项开始删除 往后删除2项 并且将索引为2的该项填充8
    var result = arr.splice(2, 2, 8); //arr [2,3,8,6] result [4,5]
    //巧用 往第二项添加一个8
    var arr = [2, 3, 4, 5, 6];
    var result = arr.splice(2, 0, 8); //arr [2,3,8,4,5,6] result []

    /*
        数组的非变异方法 不改变当前数组返回想要得到的值
    */

    var arr = [1, 2, 3, 4, 5];

    //1.indexOf 查找元素 找到返回下标 未找到返回 -1
    //(接收2个参数 第一个为要查找的元素，第二个为开始查找项的索引，不传默认从第一项)
    var result = arr.indexOf(2); // result 1
    var result = arr.indexOf(7); // result -1

    //2.includes 查找元素 找到true 未找到返回 false
    //(接收2个参数 第一个为要查找的元素，第二个为开始查找项的索引，不传默认从第一项)
    var result = arr.includes(2); // result true
    var result = arr.includes(7); // result false

    //3.join 将数组按特定的连接方式转换为字符串 （接收参数为连接的字符串 不传默认为,）
    var result = arr.join(); // result 1,2,3,4,5
    var result = arr.join(""); // result 12345
    var result = arr.join("-"); // result 1-2-3-4-5

    //4.concat 数组的组合 将数组首尾拼接
    var arr = [1, 2, 3];
    var arrX = [2, 3, 4];
    var arrY = [3, 4, 5];
    var result = arr.concat(arrX, arrY); //result [1,2,3,2,3,4,3,4,5]

    //5.slice 数组的截取 返回截取的数组
    var arr = [1, 2, 3, 4, 5];
    //入两个参为一个开始一个结束 包括开始不包括结束项
    var result = arr.slice(1, 3); // result [2,3]
    //入一个参表示从开始一直到数组最后一项，包括最后一项
    var result = arr.slice(1); // result [2,3,4,5]
    //入参为负数表示从倒数第几项开始到数组最后
    var result = arr.slice(-3, -1); //result [3,4]
    var result = arr.slice(-3); //result [3,4,5]

    // 其他

    //1.  ... 扩展运算符 用于展开数组
    var arr = [1, 2, 3, 4, 5];
    var arrX = [0];
    arrX.push(...arr); //arrX [0,1,2,3,4,5];

    //2. Array.isArray(obj); //判断该入参是否为数组
    var result = Array.isArray([0]); //result true
    var result = Array.isArray({}); //result false
    var result = Array.isArray(1); //result false

    var oBox = document.getElementsByClassName("box"); //类数组
    //3. Array.from(v); 将伪数组转化为真正的数组 
    //第二个参数为回调类似于map返回值则变为回调函数返回值组成的新数组
    var arr = {
      0: "a",
      1: "b",
      2: "c",
      length: 3
    };
    var result = Array.from(arr); // result ["a","b","c"]
    var result = Array.from(oBox); // result ["a","b","c"]
    // result.forEach(()=>{}); //可使用
    // oBox.forEach(()=>{}); //报错

    // es5方法转化
    var result = Array.prototype.slice.call(arr); // result ["a","b","c"]
    var result = Array.prototype.slice.call(oBox); // result ["a","b","c"]
    result.forEach(() => {});

    // 4.对象调用数组的方法
    [].forEach.call(oBox, (val, key) => {
      // console.log(val);
    }, this);

    // 5.copyWithin 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。(会修改当前数组)
    //它接受三个参数。
    // target （必需）：从该位置开始替换数据。
    // start （可选）：从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
    // end （可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
    var arr = [1, 2, 3, 4, 5];
    //将索引为3的值 赋值给索引为1的项
    arr.copyWithin(1, 3, 4); // arr [1,4,3,4,5]
    var arr = [1, 2, 3, 4, 5]; //由于到2便停止所以未能改变数组
    arr.copyWithin(1, 3, 2); // arr [1,2,3,4,5]

    //6.keys entries values
    // 它们都返回一个遍历器对象，可以用for...of循环进行遍历，
    //区别是
    //keys()是对键名的遍历、
    //values()是对键值的遍历，
    //entries()是对键值对的遍
    for (let index of ['a', 'b'].keys()) {
      // console.log(index);
      // 0
      // 1
    };
    for (let elem of ['a', 'b'].values()) {
      // console.log(elem);
      // 'a'
      // 'b'
    };
    for (let [index, elem] of ['a', 'b'].entries()) {
      // console.log(index, elem);
      // 0 "a"
      // 1 "b"
    };
    //公共手动遍历方法 next();
    let letter = ['a', 'b', 'c'];
    let entries = letter.entries();
    // console.log(entries.next().value); // [0, 'a']
    // console.log(entries.next().value); // [1, 'b']
    // console.log(entries.next().value); // [2, 'c']

    // 7.flat 将嵌套数组多维数组降维 返回新的数组 不修改原数组
    // 入参为深入的维度 不传默认为1
    var arr = [1, 2, 3, [4, [5, 6]]];
    var result = arr.flat(); //result [1,2,3,4,[5,6]]
    var result = arr.flat(2); //result [1,2,3,4,5,6]
    var result = arr.flat(Infinity); //全部展开不论多少层  //result [1,2,3,4,5,6]

    //8.flatMap 对原数组的每个成员执行一个函数，然后对返回值组成的数组执行flat()方法
    //只可以展开一层数组 返回新数组 不改变原数组 入参同map
    var arr = [
      [1, 2],
      [3, 4],
      [5, 6]
    ];
    var result = arr.flatMap((val, key, arr) => {
      val.push(100);
      return val; //result [1,2,100,3,4,100,5,6,100]
    }, this);

    //9.toLocaleString toString 将数组改为字符串
    var arr = ["1", "2", "3", "4", "5"];
    var result = arr.toLocaleString(); //result 1,2,3,4,5
    var arr = ["1", "2", "3", "4", "5"];
    var result = arr.toString(); //result 1,2,3,4,5
  </script>
</body>

</html>